<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Namespaces Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="completed" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This CSS Namespaces module defines the syntax for using namespaces in CSS. It defines the &apos;&apos;@namespace&apos;&apos; rule for declaring the default namespace and binding namespaces to namespace prefixes, and it also defines a syntax that other specifications can adopt for using those prefixes in namespace-qualified names." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css3-namespace/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Namespaces Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-namespaces/">https://drafts.csswg.org/css-namespaces/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css3-namespace/">https://www.w3.org/TR/css3-namespace/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2014/REC-css-namespaces-3-20140320/" rel="prev">https://www.w3.org/TR/2014/REC-css-namespaces-3-20140320/</a>
      <dd><a href="https://www.w3.org/TR/2011/REC-css3-namespace-20110929/" rel="prev">https://www.w3.org/TR/2011/REC-css3-namespace-20110929/</a>
      <dd><a href="https://www.w3.org/TR/2011/PR-css3-namespace-20110811/" rel="prev">https://www.w3.org/TR/2011/PR-css3-namespace-20110811/</a>
      <dd><a href="https://www.w3.org/TR/2008/CR-css3-namespace-20080523/" rel="prev">https://www.w3.org/TR/2008/CR-css3-namespace-20080523/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css3-namespace/20090210/">http://test.csswg.org/suites/css3-namespace/20090210/</a>
      <dt class="editor">Editor:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dt class="editor">Former Editors:
      <dd class="editor p-author h-card vcard"><span class="p-name fn">Anne van Kesteren</span> (<span class="p-org org">Opera Software ASA</span>)
      <dd class="editor p-author h-card vcard"><span class="p-name fn">Peter Linss</span> (<span class="p-org org">Netscape Communications</span>)
      <dd class="editor p-author h-card vcard"><span class="p-name fn">Chris Lilley</span> (<span class="p-org org">W3C</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-namespace-3/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-namespace-3">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This CSS Namespaces module defines the syntax for using namespaces in CSS. It defines the <span class="css">@namespace</span> rule for declaring the default namespace and binding namespaces to namespace prefixes, and it also defines a syntax that other specifications can adopt for using those prefixes in namespace-qualified names.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-namespace” in the title,
	preferably like this:
	“[css-namespace] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#terminology"><span class="secno">1.1</span> <span class="content"> Terminology</span></a>
     </ol>
    <li>
     <a href="#declaration"><span class="secno">2</span> <span class="content">Declaring namespaces: the <span class="css">@namespace</span> rule</span></a>
     <ol class="toc">
      <li><a href="#syntax"><span class="secno">2.1</span> <span class="content"> Syntax</span></a>
      <li><a href="#scope"><span class="secno">2.2</span> <span class="content"> Scope</span></a>
      <li><a href="#prefixes"><span class="secno">2.3</span> <span class="content"> Declaring Prefixes</span></a>
     </ol>
    <li><a href="#css-qnames"><span class="secno">3</span> <span class="content"> CSS Qualified Names</span></a>
    <li><a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a>
    <li><a href="#acks"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>This CSS Namespaces module defines syntax for using namespaces in CSS.
	It defines the <span class="css">@namespace</span> rule for declaring a default namespace
	and for binding namespaces to namespace prefixes.
	It also defines a syntax for using those prefixes to represent namespace-qualified names.
	It does not define where such names are valid or what they mean:
	that depends on their context and is defined by a host language,
	such as Selectors (<a data-link-type="biblio" href="#biblio-select">[SELECT]</a>),
	that references the syntax defined in the CSS Namespaces module.</p>
   <p>Note that a CSS client that does not support this module will
	(if it properly conforms to <a href="https://www.w3.org/TR/CSS21/syndata.html#parsing-errors">CSS’s forward-compatible parsing rules</a>)
	ignore all <span class="css">@namespace</span> rules,
	as well as all style rules that make use of namespace qualified names.
	The syntax of delimiting namespace prefixes in CSS was deliberately chosen
	so that these CSS clients would ignore the style rules
	rather than possibly match them incorrectly.</p>
   <h3 class="heading settled" data-level="1.1" id="terminology"><span class="secno">1.1. </span><span class="content"> Terminology</span><a class="self-link" href="#terminology"></a></h3>
   <p>Besides terms introduced by this specification,
	CSS Namespaces uses the terminology defined in Namespaces in XML 1.0. <a data-link-type="biblio" href="#biblio-xml-names">[XML-NAMES]</a> However, the syntax defined here is not restricted to representing XML element and attribute names
	and may represent other kinds of namespaces as defined by the host language.</p>
   <p>In CSS Namespaces a namespace name consisting of the empty string
	is taken to represent the null namespace
	or lack of a namespace.</p>
   <div class="example" id="example-e2c750a7">
    <a class="self-link" href="#example-e2c750a7"></a> For example, given the namespace declarations: 
<pre>@namespace empty "";
@namespace "";
</pre>
    <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#type-selector" id="ref-for-type-selector">type selectors</a> <code>elem</code>, <code>|elem</code>,
		and <code>empty|elem</code> are equivalent.</p>
   </div>
   <h2 class="heading settled" data-level="2" id="declaration"><span class="secno">2. </span><span class="content">Declaring namespaces: the <span class="css">@namespace</span> rule</span><a class="self-link" href="#declaration"></a></h2>
   <p>The <span class="css">@namespace</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#at-rule" id="ref-for-at-rule">at-rule</a> declares a namespace prefix
	and associates it with a given namespace name (a string).
	This namespace prefix can then be used in namespace-qualified names
	such as the <a data-link-type="dfn" href="#css-qualified-name" id="ref-for-css-qualified-name">CSS qualified names</a> defined below.</p>
   <div class="example" id="example-7c34a04d">
    <a class="self-link" href="#example-7c34a04d"></a> 
<pre>@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
</pre>
    <p>The first rule declares a default namespace <code>http://www.w3.org/1999/xhtml</code> to be applied to names that have no explicit namespace component.</p>
    <p>The second rule declares a namespace prefix <code>svg</code> that is used to apply the namespace <code>http://www.w3.org/2000/svg</code> where the <code>svg</code> namespace prefix is used.</p>
   </div>
   <p>In CSS Namespaces, as in Namespaces in XML 1.0,
	the prefix is merely a syntactic construct;
	it is the <dfn data-dfn-type="dfn" data-export id="expanded-name">expanded name<a class="self-link" href="#expanded-name"></a></dfn> (the tuple of local name and namespace name)
	that is significant.
	Thus the actual prefixes used in a CSS style sheet,
	and whether they are defaulted or not,
	are independent of the namespace prefixes used in the markup
	and whether these are defaulted or not.</p>
   <div class="example" id="example-53c91314">
    <a class="self-link" href="#example-53c91314"></a> For example, given the following XML document: 
<pre>&lt;qml:elem xmlns:qml="http://example.com/q-markup">&lt;/qml:elem>
</pre>
    <p>and the following <span class="css">@namespace</span> declarations at the
		beginning of a CSS file:</p>
<pre>@namespace Q "http://example.com/q-markup";
@namespace lq "http://example.com/q-markup";
</pre>
    <p>The selectors <span class="css">Q|elem</span> and <span class="css">lq|elem</span> in that CSS file
		would both match the element <code>&lt;qml:elem></code>.</p>
    <p>(The selector <span class="css">qml|elem</span> would be invalid,
		because CSS namespaces only recognize prefixes declared in CSS,
		not those declared by the document language.)</p>
   </div>
   <h3 class="heading settled" data-level="2.1" id="syntax"><span class="secno">2.1. </span><span class="content"> Syntax</span><a class="self-link" href="#syntax"></a></h3>
   <p>The syntax for the <span class="css">@namespace</span> rule is as follows
	(using the notation from the <a href="https://www.w3.org/TR/CSS21/grammar.html">Grammar appendix of CSS 2.1</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>):</p>
<pre>namespace
  : NAMESPACE_SYM S* [namespace_prefix S*]? [STRING|URI] S* ';' S*
  ;
namespace_prefix
  : IDENT
  ;
</pre>
   <p>with the new token:</p>
<pre>@{N}{A}{M}{E}{S}{P}{A}{C}{E} {return NAMESPACE_SYM;}</pre>
   <p>Any <span class="css">@namespace</span> rules must follow all @charset and @import rules
	and precede all other non-ignored at-rules and style rules in a style sheet.
	For CSS syntax this adds <code>[ namespace [S<var>CDO</var>CDC]* ]*</code> immediately after <code>[ import [S<var>CDO</var>CDC]* ]*</code> in the <code>stylesheet</code> grammar.</p>
   <p>A syntactically invalid <span class="css">@namespace</span> rule
	(whether malformed or misplaced)
	must be <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
	A CSS <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">style sheet</a> containing an invalid <span class="css">@namespace</span> rule
	is not a <a href="https://www.w3.org/TR/CSS21/conform.html#valid-style-sheet">valid style sheet</a>.</p>
   <p>A URI string parsed from the <code>URI</code> syntax must be treated as a literal string:
	as with the <code>STRING</code> syntax,
	no URI-specific normalization is applied.</p>
   <p>All strings—<wbr>including the empty string and strings representing invalid URIs—<wbr>are valid namespace names in <span class="css">@namespace</span> declarations.</p>
   <h3 class="heading settled" data-level="2.2" id="scope"><span class="secno">2.2. </span><span class="content"> Scope</span><a class="self-link" href="#scope"></a></h3>
   <p>The namespace prefix is declared only within the style sheet in which its <span class="css">@namespace</span> rule appears. It is not declared in any style sheets
	importing or imported by that style sheet, nor in any other style sheets
	applying to the document.</p>
   <h3 class="heading settled" data-level="2.3" id="prefixes"><span class="secno">2.3. </span><span class="content"> Declaring Prefixes</span><a class="self-link" href="#prefixes"></a></h3>
   <p>A <dfn data-dfn-type="dfn" data-export id="namespace-prefix">namespace prefix<a class="self-link" href="#namespace-prefix"></a></dfn>, once declared,
	represents the namespace for which it was declared
	and can be used to indicate the namespace of a namespace-qualified name.
	Namespace prefixes are, <a href="https://www.w3.org/TR/CSS21/syndata.html#counter">like CSS counter names</a>,
	case-sensitive.</p>
   <p>If in the namespace declaration the namespace prefix is omitted,
	then the namespace so declared is the default namespace.
	The <dfn data-dfn-type="dfn" data-export id="default-namespace">default namespace<a class="self-link" href="#default-namespace"></a></dfn> may apply to names that have no explicit namespace prefix:
	modules that employ namespace prefixes must define in which contexts the default namespace applies.
	For example, following <a data-link-type="biblio" href="#biblio-xml-names">[XML-NAMES]</a>,
	in Selectors <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> the default namespace applies to type selectors—<wbr>but it does not apply to attribute selectors.
	There is no default value for the default namespace:
	modules that assign unqualified names to the default namespace
	must define how those unqualified names are to be interpreted
	when no default namespace is declared.</p>
   <p class="note" role="note"><span>Note:</span> Note that using default namespaces in conjunction with type selectors
	can cause UAs that support default namespaces
	and UAs that don’t support default namespaces
	to interpret selectors differently.</p>
   <p>If a namespace prefix or default namespace is declared more than once
	only the last declaration shall be used.
	Declaring a namespace prefix or default namespace more than once is nonconforming.</p>
   <h2 class="heading settled" data-level="3" id="css-qnames"><span class="secno">3. </span><span class="content"> CSS Qualified Names</span><a class="self-link" href="#css-qnames"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-qualified-name">CSS qualified name</dfn> is a name explicitly located within (associated with) a namespace.
	To form a qualified name in CSS syntax,
	a namespace prefix that has been declared within scope is prepended to a local name
	(such as an element or attribute name),
	separated by a "vertical bar" (<code>|</code>, U+007C).
	The prefix, representing the namespace for which it has been declared,
	indicates the namespace of the local name.
	The prefix of a qualified name may be omitted to indicate that the name belongs to no namespace,
	i.e. that the namespace name part of the expanded name has no value.
	Some contexts (as defined by the host language)
	may allow the use of an asterisk (<code>*</code>, U+002A)
	as a wildcard prefix to indicate a name in any namespace,
	including no namespace.</p>
   <div class="example" id="example-06c0bddc">
    <a class="self-link" href="#example-06c0bddc"></a> Given the namespace declarations: 
<pre>@namespace toto "http://toto.example.org";
@namespace "http://example.com/foo";
</pre>
    <p>In a context where the default namespace applies</p>
    <dl>
     <dt><code>toto|A</code> 
     <dd> represents the name <code>A</code> in the <code>http://toto.example.org</code> namespace. 
     <dt><code>|B</code> 
     <dd> represents the name <code>B</code> that belongs to no namespace. 
     <dt><code>*|C</code> 
     <dd> represents the name <code>C</code> in any namespace,
				including no namespace. 
     <dt><code>D</code> 
     <dd> represents the name <code>D</code> in the <code>http://example.com/foo</code> namespace. 
    </dl>
   </div>
   <p>The syntax for the portion of a CSS qualified name before the local name is given below,
	both for qualified names that allow wildcard prefixes (<code>wqname</code>)
	and for qualified names that disallow wildcard prefixes (<code>qname</code>).
	(The syntax uses notation from the <a href="https://www.w3.org/TR/CSS21/grammar.html">Grammar appendix of CSS 2.1</a>. <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> Note this means that comments, but not white space, are implicitly allowed between tokens.):</p>
<pre>qname_prefix
  : namespace_prefix? '|'
  ;
wqname_prefix
  : [ namespace_prefix? | '*' ] '|'
  ;
qname
  : qname_prefix? ident
  ;
wqname
  : wqname_prefix? ident
  ;
wqwname
  : wqname_prefix? [ ident | '*' ]
  ;
</pre>
   <p>CSS qualified names can be used in (for example)
	selectors and property values as described in other modules.
	Those modules must define handling of namespace prefixes that have not been properly declared.
	Such handling should treat undeclared namespace prefixes as a parsing error
	that will cause the selector or declaration (etc.) to be considered invalid
	and, in CSS, <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.</p>
   <div class="example" id="example-2f570645"><a class="self-link" href="#example-2f570645"></a> For example, the Selectors module <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> defines a type selector
		with an undeclared namespace prefix
		to be an invalid selector,
		and CSS <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> requires style rules with an invalid selector to be completely ignored. </div>
   <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>Changes made since the <a href="https://www.w3.org/TR/2011/REC-css3-namespace-20110929/">29 September 2011 Recommendation</a>:</p>
   <ul>
    <li>Added predefined <span class="css">qname</span>, <span class="css">wqname</span>, and <span class="css">wqwname</span> productions,
		to make those constructs easier for other specs to use. 
   </ul>
   <h2 class="no-num heading settled" id="acks"><span class="content"> Acknowledgments</span><a class="self-link" href="#acks"></a></h2>
   <p>This draft borrows heavily from earlier drafts on CSS namespace support
	by Chris Lilley and by Peter Linss
	and early (unpublished) drafts on CSS and XML by Håkon Lie and Bert Bos,
	and XML Namespaces and CSS by Bert Bos and Steven Pemberton.
	Many current and former members of the CSS Working Group have contributed to this document.
	Discussions on www-style@w3.org and in other places have also contributed ideas to this specification.
	Special thanks goes to
	L. David Baron,
	Karl Dubost,
	Ian Hickson,
	Björn Höhrmann,
	and Lachlan Hunt
	for their comments.</p>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#css-qualified-name">CSS qualified name</a><span>, in §3</span>
   <li><a href="#default-namespace">default namespace</a><span>, in §2.3</span>
   <li><a href="#expanded-name">expanded name</a><span>, in §2</span>
   <li><a href="#namespace-prefix">namespace prefix</a><span>, in §2.3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-at-rule">
   <a href="https://drafts.csswg.org/css-syntax-3/#at-rule">https://drafts.csswg.org/css-syntax-3/#at-rule</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-rule">2. Declaring namespaces: the @namespace rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-type-selector">
   <a href="https://drafts.csswg.org/selectors-4/#type-selector">https://drafts.csswg.org/selectors-4/#type-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-type-selector">1.1. 
Terminology</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-rule" style="color:initial">at-rule</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-type-selector" style="color:initial">type selector</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-xml-names">[XML-NAMES]
   <dd>Tim Bray; et al. <a href="https://www.w3.org/TR/xml-names/">Namespaces in XML 1.0 (Third Edition)</a>. 8 December 2009. REC. URL: <a href="https://www.w3.org/TR/xml-names/">https://www.w3.org/TR/xml-names/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-select">[SELECT]
   <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
  </dl>
  <aside class="dfn-panel" data-for="css-qualified-name">
   <b><a href="#css-qualified-name">#css-qualified-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-qualified-name">2. Declaring namespaces: the @namespace rule</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>